<template>
  <div>
    <BaseForm
      v-model="model"
      :schema="schema"
      :rules="rules"
      :col="3"
      @submit.native.prevent
    >
      <template #actions="{ form, refForm }">
        <el-button type="primary" @click="onSubmit(refForm)">提交</el-button>
        <el-button @click="refForm.resetFields()">重置</el-button>
      </template>
      <!-- 自定义渲染示例 -->
      <template #customSlot="{ model }">
        <el-input v-model="model.remark" placeholder="自定义插槽内容" />
      </template>
    </BaseForm>
  </div>
</template>

<script>
import BaseForm from '@/components/Form/index.vue';

export default {
  components: { BaseForm },
  data() {
    return {
      model: { name: '', age: null, gender: '', hobby: [], date: '', remark: '' },
      schema: [
        { prop: 'name',   label: '姓名',  component: 'input',  required: true, props: { maxlength: 20 } },
        { prop: 'age',    label: '年龄',  component: 'number', props: { min: 0, max: 120 } },
        { prop: 'gender', label: '性别',  component: 'radio',  options: [{label:'男',value:'M'},{label:'女',value:'F'}] },
        { prop: 'hobby',  label: '爱好',  component: 'checkbox', options: [{label:'球类',value:'ball'},{label:'音乐',value:'music'}] },
        { prop: 'date',   label: '日期',  component: 'date',   dateType: 'date', valueFormat: 'yyyy-MM-dd' },
        { prop: 'remark', label: '备注',  slot: 'customSlot',  colSpan: 24 }
      ],
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
      }
    };
  },
  methods: {
    async onSubmit(refForm) {
      const ok = await new Promise(r => refForm.validate(r));
      if (ok) this.$message.success('校验通过');
    }
  }
};
</script>